<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>巡更任务巡更点列表</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="./css/comm.css" />
    <link rel="stylesheet" type="text/css" href="./css/headersearch.css" />
    <link rel="stylesheet" type="text/css" href="./css/plandevicetasklist.css" />
    <style>
         .aui-content.contentBox {
            margin-top: 7rem;
        }
        .top-header{
            padding: 10px 10px 5px 10px;
            display: flex;
            justify-content: space-around;
        }
        .top-bg-grey{
            width: 23%;
            background-color: #f0f0f0;
            text-align: center;
            border-radius: 4px;
            display: inline-block;
            padding: 6px 0px;
        }
        .top-bg-blue{
            background-color: #e7edfa;
            position: relative;
        }
        .top-bg-blue .rightcontent {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 20px;
        }
        .top-count{
            font-weight: 600;
            font-size: 16px;
        }
        .list_box_li{
            border-radius: 0;
            box-shadow: unset;
            margin-top: 0;
        }
        .text-grey {
            color: #999 !important;
        }
        .text-blue {
            color: #289FFF !important;
        }
        .text-red{
            color: #ff0000 !important;
        }
        .equipment_box{
            height: auto;
            line-height: unset;
            padding: 15px 5px;
        }
        .list-content{
            display: flex;
            justify-content: space-between;
            width: 100%;
        }
        .tip-nostart{
            text-align: center;
            height: 32px;
            line-height: 32px;
            background: #fad0bd;
            color: #fb8753;
            font-size: 13px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="aui-content headerBox bgshadow" style="height: auto;">
            <div class="top-header" >
                <div v-on:click="onClickStatus(item.ID)" v-for="(item,index) in statusList" class="top-bg-grey" v-bind:class="{'top-bg-blue':form.status==item.ID}">
                    <img v-if="form.status==item.ID" class="rightcontent" src="../image/isroomselects.png" />
                    <div class="text-grey" v-bind:class="{'text-red':index==3}">{{item.Name}}</div>
                    <div class="top-count" v-bind:class="{'text-red':index==3}">{{item.count}}</div>
                </div>
            </div>
            <!-- 搜索 -->
            <div class="aui-searchbar aui-margin-b-5" id="search">
                <div class="aui-searchbar-input aui-border-radius">
                    <i class="icon iconfont icon-sousuo"></i>
                    <input v-model="form.keywords" type="search" placeholder="搜索巡更点名称" id="search-input">
                    <div class="aui-searchbar-clear-btn" style="top:12px">
                        <i class="icon iconfont icon-guanbi"></i>
                    </div>
                </div>
                <div class="aui-searchbar-btn" tapmode></div>
            </div>
        </div>

        <!-- 内容 -->
        <section class="aui-content contentBox">
            <div class="list_box" >
                <div class="noinfo noinfo-mt" id="noorder" v-if="lists.length==0">
                    <img src="../image/index/noinfomsg_icon.png" alt="" />
                    <h5><br />没有相关数据哦</h5>
                </div>
                <!-- loop -->
                <div v-if="IsStartStatus&&lists.length>0" class="tip-nostart">任务将于<span style="font-size: 13px;">{{PlanStartTime?PlanStartTime:'--'}}</span>开始，当前暂不支持任务打卡</div>
                <div v-if="lists.length>0" v-for="(item,index) in lists" class="list_box_li boxarea">
                    <div class="list_box_li_title equipment_box"  v-on:click="do_view(item,index)"  v-bind:class="{'border-bottomLine':index<lists.length-1}">
                        <div v-if="item.TaskStatus=='3'">
                            <!--是否漏巡-->
                            <div v-if="item.IsMiss=='true'">
                                <div style="width: 100%;height: 30px;">
                                    <div class="equipment_name fl aui-ellipsis-1">
                                        <i class="icon iconfont icon-yidu text-grey aui-font-size-14 text-blue"></i>
                                        {{item.PatrolName?item.PatrolName:'--'}}
                                    </div>
                                    <div class=" fr">
                                        <div class="text-red">漏巡</div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="item.IsMiss!='true'">
                                <div style="width: 100%;height: 30px;">
                                    <div class="equipment_name fl aui-ellipsis-1">
                                        <i class="icon iconfont icon-yidu text-grey aui-font-size-14 text-blue"></i>
                                        {{item.PatrolName?item.PatrolName:'--'}}
                                    </div>
                                    <div class=" fr">
                                        <div v-if="item.IsInvalidComplete=='false'" class="text-blue">正常</div>
                                        <div v-if="item.IsInvalidComplete=='true'" class="text-red">异常</div>
                                    </div>
                                </div>
                                <div v-if="item.TaskStatus=='3'" class="text-grey" style="margin-left: 20px;">
                                    <div class="list-content aui-margin-b-5">
                                        <div style="display: flex;">
                                            <img v-if="item.TaskChargeManHeaderImg" :src="item.TaskChargeManHeaderImg" class="aui-margin-r-10"
                                                style="border-radius: 50%;width: 20px;height: 20px;">
                                            <img v-if="!item.TaskChargeManHeaderImg" src="../image/default.png" class="aui-margin-r-10"
                                                style="border-radius: 50%;width: 20px;height: 20px;">
                                            {{item.TaskChargeManName?item.TaskChargeManName:'--'}}
                                        </div>
                                        <div><span v-text="onDealTaskTime(item.TaskCompleteTime)"></span> 完成打卡<span v-if="item.IsSupplementCard=='true'" class="text-red">(补打)</span>
                                        </div>
                                    </div>
                                    <div v-if="item.GPSLocation" class="aui-margin-b-5"><i
                                            class="icon iconfont icon-addressdizhi aui-font-size-16 text-grey aui-margin-r-10"></i>{{item.GPSLocation}}
                                    </div>
                                    <div class="aui-margin-b-5 aui-ellipsis-2"><i
                                            class="icon iconfont icon-renwu aui-font-size-16 text-grey aui-margin-r-10"></i>{{item.TaskCompleteContent}}
                                    </div>
                                </div>
                                <div class="cl"></div>
                            </div>
                        </div>
                        <div v-if="item.TaskStatus!='3'">
                            <div class="equipment_name fl aui-ellipsis-1">
                                <i class="icon iconfont icon-yidu text-grey aui-font-size-14"></i>
                                {{item.PatrolName?item.PatrolName:'--'}}</div>
                            <div class="fr">
                                <div v-if="item.CanPunchCard=='false'" class="text-grey">未开始</div>
                                <div v-if="item.CanPunchCard=='true'" class="text-grey">去打卡</div>
                            </div>
                            <div class="cl"></div>
                        </div>
                        
                    </div>
                </div>
                <div v-if="lists.length>0" class="notodayList" >
                    没有更多内容
                </div>
                <!-- loop -->
            </div>
        </section>
       
    </div>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/aui-toast.js"></script>
    <script type="text/javascript" src="../script/config.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript" src="../script/vue.js"></script>
    <script type="text/javascript" src="../script/aui-pull-refresh.js"></script>
    <script type="text/javascript" src="../script/aui-scroll.js"></script>
    <script type="text/javascript" src="../script/aui-popup.js"></script>
    <script type="text/javascript " src="../script/moment/moment.js"></script>
    <script type="text/javascript" src="js/renwulist_off_frm.js"></script>
</body>

</html>
